<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
  <title>选择框</title>
  <script src="../lib/angular.1.7.8.js"></script>
</head>

<body>
  <div ng-app="myApp"
       ng-controller="myCtrl">
    <select name=""
            id=""
            ng-init="selectItem=list[0]"
            ng-model="selectItem"
            ng-options="x for x in list"></select>
    <p>列表：{{list}}</p>
    <p>选中的是：{{selectItem}}</p>
    <hr />
    <h3>ng-options 与 ng-repeat 的区别</h3>
    <p>ng-options:</p>
    <select ng-model="selectSite"
            ng-options="x.site for x in sites"></select>
    <p>选中的是：{{selectSite.site}}</p>
    <p>网址是：{{selectSite.url}}</p>
    <p>ng-repeat:</p>
    <select ng-model="selectSite2">
      <option ng-repeat="x in sites"
              value="{{x.url}}">{{x.site}}</option>
    </select>
    <p>你选择的是: {{selectSite2}}</p>
  </div>

  <script>
    var app = angular.module('myApp', [])
    app.controller('myCtrl', ($scope) => {
      $scope.list = [
        'google',
        'facebook',
        'alibaba'
      ]
      $scope.sites = [
        { site: "Google", url: "http://www.google.com" },
        { site: "Runoob", url: "http://www.runoob.com" },
        { site: "Taobao", url: "http://www.taobao.com" }
      ];
    })
  </script>
</body>

</html>
